.tip{
  cursor: default;
  position: absolute;
  left: 2px;
  /* top: 200px; */
  z-index: 102;
  border: 1px solid #000;
  box-shadow: 0 0 20px rgb(195,195,195);
}
.tip-top{
  height: 24px;
  background-color: #fff;
  min-width: 193px;
  overflow: hidden;
  display: flex;
  align-items:center;
}
.tip-top img{
  margin:0 4px;
  width: 16px;
  height: 12px;
}
.tip-title{
  font-size: 12px;
}
.tip-close{
  /* font-weight: lighter; */
  cursor: default;
  position: absolute;
  right: 0;
  height: 26px;
  line-height: 26px;
  z-index: 101;
  padding:0 20px;
  transition: background .1s linear;
}
.tip-close:hover{
  background-color: red; 
  color: #fff;
}
.tip-content{
  height: 130px;
  background-color: rgb(240,240,240);
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes fade {
  from {
    border-color: #000;
    box-shadow: 0 0 20px rgb(195,195,195);;
  }
  50% {
    border-color: rgb(218, 213, 213);
    box-shadow: 0 0 10px rgb(195,195,195);;
  }
  to {
    border-color: #000;
    box-shadow: 0 0 20px rgb(195,195,195);;
  }
}
@keyframes textfade {
  from {
    color:#000
  }
  50% {
    color:rgb(184, 181, 181)
  }
  to {
    color:#000
  }
}
.fade {
  animation: fade 140ms infinite;
}
.fade .tip-top{
  animation: textfade 140ms infinite
}

/*------------*/
.custom{
  display: flex;
  cursor: default;
}
.custom-left{
  width: 100px;
  height: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-shadow: #111 0 0 1px;
}
.custom-left div{
  font-size: 12px;
  font-weight: 400;
  color: rgb(32,32,32);
  
}
.custom-left input{
  width: 30px;
  height: 12px;
  display: inline;
  position: absolute;
  right: 0;
  border-radius: 0%;
  outline: none;
  border-color: rgb(169,169,169);
  border-width: .1.5em;
  font-size: 12px;
  text-shadow: #111 0 0 1px;
}
.custom-left input:focus{
  border-color: rgb(91,168,229);
}
.custom-right{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.button{
  border: 1px solid rgb(178,178,178);
  background-color: rgb(225,225,225);
  font-size: 13px;
  text-shadow: #111 0 0 1px;
  padding: 2px 0;
  transition: all .2s linear;
}
.button:hover{
  border-color: rgb(23,132,219);
  background-color: rgb(229,241,251);
  box-shadow: 0 0 1px rgb(2, 95, 167);
}
.button span{
  margin: 0 14px;
}

/*------------*/

.rank{
  width: 254px;
}
.rank-top{
  padding:0px 15px 20px 15px;
}
.rank-top-item{
  height: 18px;
}
.rank-top-item span{
  font-size: 12px;
  text-shadow: #111 0 0 1px;
}
.rank-top-item span:last-child{
  margin-left: 50px;
}
.rank-bottom{
  margin: 0 35px;
  display: flex;
  justify-content: space-between;
}
.rank-bottom .button{
  padding: 0;
}
